/*
 * @Descripttion:
 * @Author: wangyigang
 * @version:
 * @Date: 2022-11-24 16:56:44
 * @LastEditors: wangyigang
 * @LastEditTime: 2022-11-24 16:56:44
 */
import React, { useEffect, useState } from "react";
import { withRouter, useHistory } from "react-router-dom";
import "./index.less";
import { Layout, Menu } from "antd";
import * as Icons from "@ant-design/icons";
const { Sider } = Layout;
//redux刷新后路由消失，需要重新拿取
let menuListData = [];
const DisplayNav = (props) => {
  let collapsed = props.collapsed;
  if (props && props.menu && props.menu.length > 0) {
    menuListData = JSON.parse(JSON.stringify(props.menu));
  }
  const onCollapse = () => {
    collapsed = !collapsed;
  };
  const history = useHistory();
  const [itemValue, setItemValue] = useState();
  const [openKey, setopenKey] = useState();
  const menuSelected = history.location.pathname;

  // 过滤拿到所有父节点,刷新还能够展开的方法
  const getAllParentArr = (list, id) => {
    if (!list || !id) {
      return "";
    }
    const arr = [];
    const findParent = (data, nodeId, parentId) => {
      for (let i = 0, { length } = data; i < length; i += 1) {
        const node = data[i];
        if (node.path === nodeId) {
          arr.unshift(nodeId.toString());
          if (nodeId.toString() === list[0].path) {
            break;
          }
          findParent(list, parentId);
          break;
        } else if (node.child) {
          findParent(node.child, nodeId, node.path);
        }
      }
      return arr;
    };
    const allOpen = findParent(list, id);
    return allOpen;
  };
  // handleQueryMenuList();
  useEffect(() => {
    const handleQueryMenuList = async () => {
      //调用默认展开
      setopenKey(getAllParentArr(menuListData, menuSelected));
      const menuList = menuListData;
      // 处理成Menu新语法,组件需要的格式
      const handleData = (arr) => {
        if (arr && arr.length > 0) {
          for (let i = 0; i < arr.length; i += 1) {
            const obj = arr[i];
            const {
              title, path, child, isshow, parentId
            } = obj;
            // 需要label、key、children 暂没看到自定义key文档
            obj.label = title;
            obj.key = path;
            obj.children = child;
            obj.isshow = `${isshow}`;
            obj.parentid = parentId;
            if (obj.children.length === 0) delete obj.children;
            // 驼峰命名 antd menu组件有warn警告
            delete obj.isShow;
            delete obj.parentId;
            const CurIcon = Icons[obj.icon];
            obj.icon = CurIcon ? <CurIcon /> : "";
            if (obj.child) {
              handleData(obj.child);
            }
          }
        }
      };
      handleData(menuList);
      // 设置items值
      setItemValue(menuList);
    };
    handleQueryMenuList();
  }, [menuSelected]);
  // 菜单点击事件
  const onClick = (e) => {
    history.push({ pathname: `${e.key}` });
  };
  return (
    <Sider
      style={{
        overflow: "hidden", height: "100%", position: "fixed", left: 0,
      }}
      width={200}
      className="site-layout-background"
      collapsed={collapsed}
      onCollapse={onCollapse}
    >
      <div className="ant-pro-sider-logo">
        <img src="http://www.ptgcn.com/img/small-logo.png" alt="logo" />
        {!collapsed ? (
          <h1>
            Proteintech
          </h1>
        ) : ""}
      </div>
      <div className="menuScroll" style={{ flex: "1 1 0%", overflow: "hidden auto" }}>
        {itemValue
          && (
            <Menu
              onClick={onClick}
              theme="dark"
              mode="inline"
              defaultSelectedKeys={[menuSelected]}
              defaultOpenKeys={openKey}
              style={{ height: "100%", borderRight: 0 }}
              items={itemValue}
            />
          )}
      </div>
    </Sider>
  );
};

export default withRouter(DisplayNav);
